<div nz-row nzGutter="12">
  <div nz-col nzMd="24" nzLg="18">
    <div nz-row nzGutter="12">
      <div nz-col nzMd="24" nzLg="16">
        <div class="card">
          <div nz-row nzGutter="24">
            <div nz-col nzSm="24" nzMd="14">
              <div class="card__hd">{{ 'home.yundun.sas.title' | i18n }}</div>
              <div class="card__bd">
                <div nz-row nzGutter="12">
                  <div nz-col nzSpan="8">
                    <a (click)="msg.info('to')" class="item-block vertical">
                      <div class="item-block__num" [ngClass]="{ 'text-error': 2 > 0 }">2</div>
                      <div class="item-block__text">{{ 'home.yundun.sas.event' | i18n }}</div>
                    </a>
                  </div>
                  <div nz-col nzSpan="8">
                    <a (click)="msg.info('to')" class="item-block vertical">
                      <div class="item-block__num">0</div>
                      <div class="item-block__text">{{ 'home.yundun.sas.vul' | i18n }}</div>
                    </a>
                  </div>
                  <div nz-col nzSpan="8">
                    <a (click)="msg.info('to')" class="item-block vertical">
                      <div class="item-block__num">0</div>
                      <div class="item-block__text">{{ 'home.yundun.sas.attack' | i18n }}</div>
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <div nz-col nzSm="24" nzMd="10">
              <div class="card__hd">{{ 'home.yundun.protection.title' | i18n }}</div>
              <div class="card__bd">
                <a (click)="msg.info('to')" class="item-block large">
                  <div class="item-block__text">{{ 'home.yundun.aegis.title' | i18n }}</div>
                  <div class="item-block__num">
                    <div class="d-flex align-items-center">
                      <span [ngClass]="{ 'text-error': 10 > 0 }">10</span>
                      <small>{{ 'home.yundun.sas.event.unit' | i18n }}</small>
                    </div>
                  </div>
                </a>
                <a class="item-block large">
                  <div class="item-block__text">{{ 'home.yundun.waf.title' | i18n }}</div>
                  <a (click)="msg.info('to buy')" class="brand-color text-xs">{{ 'home.yundun.waf.buy' | i18n }}</a>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div nz-col nzMd="24" nzLg="8">
        <div class="card">
          <div class="card__hd">{{ 'home.todo_issue.title' | i18n }}</div>
          <div class="card__bd">
            <a (click)="msg.info('to')" class="item-block">
              <div class="item-block__text">{{ 'home.todo_issue.workorder' | i18n }}</div>
              <div class="item-block__num" [ngClass]="{ 'text-error': 10 > 0 }">10</div>
            </a>
            <a (click)="msg.info('to')" class="item-block">
              <div class="item-block__text">{{ 'home.todo_issue.renew' | i18n }}</div>
              <div class="item-block__num" [ngClass]="{ 'text-error': 1 > 0 }">1</div>
            </a>
            <a (click)="msg.info('to')" class="item-block">
              <div class="item-block__text">{{ 'home.todo_issue.order' | i18n }}</div>
              <div class="item-block__num">0</div>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="card mt-md">
      <div class="card__hd">
        {{ 'home.recent.title' | i18n }}
        <a (click)="msg.info('to')" class="brand-color">
          {{ 'home.operationlog.title' | i18n }}<i nz-icon nzType="clock-circle" class="ml-sm"></i>
        </a>
      </div>
      <div class="card__bd fix-boundary recent">
        <div nz-row nzGutter="12">
          <div nz-col nzSm="24" nzMd="12" nzLg="8" *ngFor="let i of recentlies">
            <a (click)="msg.info(i)" class="item-block mb-sm">
              <div class="item-block__text">{{ i }}</div>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="card bg-blue-4 phecda mt-md">
      <h2>广告活动</h2>
      <p>这是一段完整的描述文本；这是一段完整的描述文本。</p>
      <a (click)="msg.info('a')" class="btn">了解详情</a>
    </div>
    <div class="card tabs my-md">
      <nz-tabset>
        <nz-tab nzTitle="{{ 'home.module.my_consume.title' | i18n }}">
          <div class="tabs-content">
            <div nz-row nzGutter="12">
              <div nz-col nzMd="24" nzLg="12">
                <div class="consume-summary">
                  <h4 class="text-center">{{ 'home.module.my_consume.summay.title' | i18n }}</h4>
                  <div nz-row nzGutter="12">
                    <div nz-col nzSpan="12">
                      <div class="balance">
                        <div class="p-sm">{{ 'home.module.my_consume.balance.title' | i18n }}</div>
                        <strong class="num">0.00</strong>
                      </div>
                      <a (click)="msg.info('to')" nz-button nzType="primary" nzBlock>{{
                        'home.user.bt.recharge' | i18n
                      }}</a>
                    </div>
                    <div nz-col nzSpan="12">
                      <a (click)="msg.info('to')" class="item-block coupon">
                        {{ 'home.module.my_consume.coupon.title' | i18n }}
                        <span class="px-xs">10</span>
                        {{ 'home.module.my_consume.coupon.unit' | i18n }}
                      </a>
                      <a (click)="msg.info('to')" class="item-block coupon">
                        {{ 'home.module.my_consume.stored_card.title' | i18n }}
                        <span class="px-xs">10</span>
                        {{ 'home.module.my_consume.coupon.unit' | i18n }}
                      </a>
                      <a (click)="msg.info('to')" class="item-block coupon">
                        {{ 'home.module.my_consume.reduction_card.title' | i18n }}
                        <span class="px-xs">10</span>
                        {{ 'home.module.my_consume.coupon.unit' | i18n }}
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <div nz-col nzMd="24" nzLg="12">
                <div class="consume-monthly">
                  <h4 class="text-center">{{ 'home.module.my_consume.monthly.title' | i18n }}</h4>
                  <nz-skeleton [nzLoading]="!data"></nz-skeleton>
                  <div
                    *ngIf="data"
                    class="monthly-wrap"
                    [mouseFocus]="{ itemSelector: '.monthly-item', actionClassName: 'monthly-item__active' }"
                  >
                    <div
                      *ngFor="let i of data.consumeMonthly; let idx = index"
                      class="monthly-item"
                      [ngClass]="{ 'monthly-item__active': idx === 0 }"
                    >
                      <div class="monthly-item-num" [ngClass]="{ 'monthly-item-num-dark': i.percent > 20 }">
                        {{ i.value | _currency }}
                      </div>
                      <div class="monthly-item-month">{{ i.month }} {{ 'home.module.my_consume.month' | i18n }}</div>
                      <div class="monthly-item-bg monthly-item-bg-{{ idx + 1 }}" [style.width.%]="i.percent"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </nz-tab>
        <nz-tab nzTitle="{{ 'home.module.ambassador.title' | i18n }}">
          <div class="tabs-content ambassador">
            <div class="text-center">
              <h3>{{ 'home.module.ambassador.title' | i18n }}</h3>
              <p class="px-lg">{{ 'home.ambassador.noAmbassadorUser.title' | i18n }}</p>
            </div>
            <div nz-row nzGutter="12">
              <div nz-col nzSpan="12">
                <div class="d-flex align-items-center justify-content-center py-md bg-grey-lighter">
                  <i nz-icon nzType="dollar" class="display-2 px-md"></i>
                  <div>
                    <h3 class="mb-xs">{{ 'home.ambassador.noAmbassadorUser.advantage1.title' | i18n }}</h3>
                    <div class="text-grey-dark">{{ 'home.ambassador.noAmbassadorUser.advantage1.desc' | i18n }}</div>
                  </div>
                </div>
              </div>
              <div nz-col nzSpan="12">
                <div class="d-flex align-items-center justify-content-center py-md bg-grey-lighter">
                  <i nz-icon nzType="trophy" class="display-2 px-md"></i>
                  <div>
                    <h3 class="mb-xs">{{ 'home.ambassador.noAmbassadorUser.advantage2.title' | i18n }}</h3>
                    <div class="text-grey-dark">{{ 'home.ambassador.noAmbassadorUser.advantage2.desc' | i18n }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="mt-lg text-center">
              <a (click)="msg.info('to')" nz-button nzType="primary">
                {{ 'home.ambassador.noAmbassadorUser.join' | i18n }}
              </a>
            </div>
          </div>
        </nz-tab>
      </nz-tabset>
    </div>
  </div>
  <div nz-col nzMd="24" nzLg="6">
    <div class="card tabs">
      <nz-skeleton [nzLoading]="!data"></nz-skeleton>
      <nz-tabset *ngIf="data">
        <nz-tab *ngFor="let p of data.notice" [nzTitle]="p.title">
          <div class="p-md">
            <ul class="list-unstyled" style="line-height: 25px;">
              <li *ngFor="let i of p.list" class="text-truncate">
                <a (click)="msg.info(i)">{{ i }}</a>
              </li>
            </ul>
            <a (click)="msg.info('more')" class="brand-color">{{ 'home.common.more' | i18n }}</a>
          </div>
        </nz-tab>
      </nz-tabset>
    </div>
    <div class="card mt-md">
      <div class="card__hd">
        管理助手
        <a (click)="msg.info('more')" class="brand-color">查看更多</a>
      </div>
      <div class="card__bd">
        <nz-skeleton [nzLoading]="!data"></nz-skeleton>
        <ng-container *ngIf="data">
          <div *ngFor="let i of data.assistant" class="assistant">
            <div class="assistant-icon"><i class="iconfont {{ i.icon }}"></i></div>
            <div class="assistant-content">
              <h3 class="text-sm">{{ i.title }}</h3>
              <p class="mb-sm">{{ i.remark }}</p>
              <a (click)="msg.info(i.title)" nz-button nzSize="small">立即前往</a>
            </div>
          </div>
        </ng-container>
      </div>
    </div>
    <div class="info mt-md">
      <div class="info__hd">{{ 'home.information.newproduct.title' | i18n }}</div>
      <div class="info__bd">
        <nz-skeleton [nzLoading]="!data"></nz-skeleton>
        <ng-container *ngIf="data">
          <ul class="list-unstyled" style="line-height: 25px;">
            <li *ngFor="let i of data.notice[0].list" class="text-truncate">
              <a (click)="msg.info(i)">{{ i }}</a>
            </li>
          </ul>
          <a (click)="msg.info('more')" class="brand-color">{{ 'home.common.more' | i18n }}</a>
        </ng-container>
      </div>
    </div>
    <a (click)="openCustom()" class="info__custom-btn mt-md">
      <i nz-icon nzType="plus" class="mr-md"></i>
      {{ 'home.information.title' | i18n }}
    </a>
    <div class="card mt-md d-flex align-items-center justify-content-center">
      <img src="//qr.liantu.com/api.php?text=https://e.ng-alain.com/" height="100" />
      <div class="ml-sm">
        <h3 class="h5 mb0">{{ 'home.qrcode.title' | i18n }}</h3>
        <div>{{ 'home.qrcode.description_1' | i18n }}</div>
        <div>{{ 'home.qrcode.description_2' | i18n }}</div>
        <div>{{ 'home.qrcode.description_3' | i18n }}</div>
      </div>
    </div>
  </div>
</div>
